<template>
    <div style="margin-top: 30px">
        <div style="background: #F5F5F5;width: 100%;height: 500px">
            <div style="margin-left: 300px">
                <div v-if="sku.skuId">
                    <div class="addSuccess">
                        <a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a"/>

                        商品已成功加入购物车！
                    </div>
                    <div style="margin-top: 20px">
                        <a-row>
                            <a-col :span="1">
                                <img :src="sku.picture" style="width: 60px;height: 60px"/>
                            </a-col>
                            <a-col :span="15" style="margin-left: 10px">
                                <div class="title"> {{sku.name}}
                                </div>
                                <div style="margin-top: 10px">
                                <span class="spec">
                                        <span>{{sku.specStr}}</span>
                                </span>
                                </div>
                            </a-col>
                            <a-col :span="7">

                                <div style="margin-right: 5px" class="shopping-car-div">
                                    <span class="add-shopping-cart" @click="toCartIndex">去购物车结算</span>
                                </div>
                                <div class="shopping-car-div">
                                    <span class="add-shopping-cart"
                                          style="background: #FFFFFF;color: #E2231A" @click="toDetail">查看商品详情</span>
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                </div>
                <div v-else>
                    <a-result status="404" title="404" sub-title="购物车中暂时没有商品哦!">
                        <template #extra>
                            <a-button type="primary" @click="toHome">
                                去看看
                            </a-button>
                        </template>
                    </a-result>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getLocalStorageJson} from "../../utils/auth";
    import {getUrlParam} from "../../utils/urlUtils";
    import cartApi from "../../api/goods/cartApi";
    import Cookies from "js-cookie";

    export default {
        name: "addToCart",
        data() {
            return {
                sku: {},
                goodsId: undefined,
            }
        },
        created() {
            let urlParam = getUrlParam();
            let skuId = urlParam ? urlParam.skuId : undefined;
            this.goodsId = urlParam ? urlParam.id : undefined;
            if (skuId) {
                const token = Cookies.get("user_token_web")
                if (!token) {
                    let cartList = getLocalStorageJson("mm_cart");
                    if (cartList && cartList.length > 0) {
                       let target= cartList.find(item => item.skuId == skuId)

                       this.sku=target;
                        console.log(this.sku)
                    }
                } else {
                    cartApi.queryBySkuId(skuId).then(resp => {
                        if (resp.data.flag) {
                            let sku = resp.data.data;
                            sku.selectedParam = sku.selectedParam ? JSON.parse(sku.selectedParam) : ""
                            this.sku = sku
                            console.log(this.sku)
                        }
                    })
                }

            }


        },
        methods: {
            toHome() {
                this.$router.push("/home")
            },
            toDetail() {
                if (this.sku.selectedParam) {
                    let selectedIndexes = Object.values(this.sku.selectedParam);
                    let indexes = ""
                    selectedIndexes.forEach(indx => indexes += indx + "_")
                    this.$router.push(`/goodDetail?id=${this.goodsId}&index=${indexes.substring(0, indexes.length - 1)}`)
                } else {
                    this.$router.push("/home")
                }
            },
            toCartIndex() {
                this.$router.push("/cart_index")
            }
        }
    }
</script>

<style scoped>

    .addSuccess {
        color: #71b247;
        font-size: 20px;
        font-family: "Microsoft YaHei";
        line-height: 25px;
        font-weight: 400;
    }

    .spec {
        font: 12px "Microsoft YaHei";
        color: #aaa;
    }

    .title {
        color: #333333;
        font-size: 14px;
    }

    .add-shopping-cart {
        background: #DE3033;
        padding: 10px 18px;
        color: white;
        font-size: 16px;
        font-family: "microsoft yahei";
        height: 20px;

    }

    .shopping-car-div {
        float: right;
    }

    .shopping-car-div :hover {
        cursor: pointer;

    }

</style>